<script lang="ts" setup>
import { get, post, message, loadFile } from '@/utils'
import { FormInstance, TableColumnData } from '@arco-design/web-vue'
import { LogisticsType } from '@/enum/order'
import cloneDeep from 'lodash/cloneDeep'
import useTable from '@/hooks/useTable'
const props = defineProps<{
  show: boolean
  id: number | string
}>()
const emit = defineEmits(['update:show', 'confirm'])
const formRef = ref() as Ref<FormInstance>
const { formatColumns } = useTable()
const orderInfo = reactive<any>({
  logistics: {},
})
const detail = reactive({
  id: props.id,
  detailList: [] as any[],
})
const submit = done => {
  const query = cloneDeep(detail)
  query.detailList.forEach((item, i) => {
    if (item.goodsNum == 0) {
      query.detailList.splice(i, 1)
    }
  })
  // console.log(query)
  // done(false)
  // return
  formRef.value.validate(err => {
    if (!err) {
      console.log('🚀 ~ file: SendModal.vue:36 ~ formRef.value.validate ~ query:', query)
      post(
        { url: '/server-shop/admin/order/refund', data: query },
        ({ code, msg }) => {
          message({
            type: code == 200 ? 'success' : 'error',
            content: msg,
          })
          emit('update:show', false)
          emit('confirm')
          done(true)
        },
        () => done(false)
      )
    } else done(false)
  })
}
const getInfo = () => {
  get({ url: '/server-shop/admin/order/info', data: { id: props.id } }, ({ data }) => {
    Object.assign(orderInfo, data)
    data.orderDetailList.forEach(item => {
      detail.detailList.push({
        orderDetailId: item.id,
        goodsNum: 0,
      })
    })
  })
}
onMounted(() => {
  getInfo()
})
const formatSpec = objStr => {
  let str = ''
  const obj = JSON.parse(objStr)
  Object.keys(obj).forEach(key => {
    str += `${key}【${obj[key]}】`
  })
  return str
}
const column = formatColumns([
  {
    dataIndex: 'goods',
    title: '商品信息',
    width: 200,
    align: 'left',
    ellipsis: true,
  },
  {
    dataIndex: 'spec',
    width: 100,
    title: '规格',
    ellipsis: true,
  },
  {
    dataIndex: 'orderNum',
    width: 120,
    title: '总数(件)',
  },
  {
    dataIndex: 'form',
    width: 150,
    title: '退款数量',
  },
]) as TableColumnData[]
</script>
<template>
  <CModal v-model:visible="props.show" width="800px" @before-ok="submit" :mask-closable="false" title="强制退款" @cancel="emit('update:show', false)">
    <a-space direction="vertical" style="width: 100%">
      <a-form :model="detail" ref="formRef" :label-col-props="{ span: 4 }" :wrapper-col-props="{ span: 20 }"> </a-form>
      <a-table :columns="column" :data="orderInfo.orderDetailList" :pagination="false" :bordered="{ cell: true }">
        <template #goods="{ record }">
          <a-space>
            <a-image width="50" :src="record.goods.img"></a-image>
            <p>{{ record.goods.name }}</p>
          </a-space>
        </template>
        <template #spec="{ record }">
          {{ formatSpec(record.goods.goodsSpec) }}
        </template>
        <template #orderNum="{ record }">
          <div class="order-num">
            <p>{{ record.goodsNum }}</p>
            <p class="red">已发{{ record.logisticsNum }}</p>
            <p class="red">已退款{{ record.refundNum }}</p>
          </div>
        </template>
        <template #form="{ record, rowIndex }">
          <a-input-number :min="0" hide-button v-model="detail.detailList[rowIndex].goodsNum" placeholder="退款数量" style="width: 120px">
            <template #append>
              <a-tooltip :content="`最大可退款数量:${record.goodsNum - record.logisticsNum - record.refundNum}`">
                <icon-question-circle />
              </a-tooltip>
            </template>
          </a-input-number>
        </template>
      </a-table>
    </a-space>
  </CModal>
</template>
<style lang="less" scoped>
.content {
  background: #f2f5f9;
  padding: 10px;
  flex: 2;
}
.order-num {
  font-size: 12px;
}
</style>
